<cfscript>
	ui = "products";
	view = "grid";
	obj = "product";
	productCategories = request.ProductCategoryGateway.query(Active = 1);
	defaultFilter = {Active = 1, Inventory = "", Allow_Back_Order = "", Download_Only = "", productIDs = "", productCategoryIDs = ""};
	filter = request.Base.getUIFilter(ui = ui, defaultFilter = defaultFilter);
</cfscript>

<script type="text/javascript">
<!--	
	<cfoutput>
		var ui = "#ui#";
		var view = "#view#";
		var obj = "#obj#";
		var productCategories = #SerializeJSON(productCategories)#;
		var filter = #SerializeJSON(filter)#;
	</cfoutput>
	
	var gridColumnsConfig = [
		{field: "product_id", title: "ID", template: "<a href='?ui=product&Product_ID=#=product_id#'>#=product_id#</a>", width: 70},
		{field: "active", title: "Active", template: function(dataItem) {return (dataItem.active) ? "Yes" : "No"}, width: 100},
		{field: "sku", title: "SKU", width: 100},
		{field: "category", title: "Category", template: "#=category# #=subcategory#"},
		{field: "product", title: "Name"},
		{field: "download_only", title: "DL Only", template: function(dataItem) {return (dataItem.download_only) ? "Yes" : "No"}, width: 100},
		{field: "inventory", title: "Inventory", template: function(dataItem) {return (dataItem.inventory) ? "Yes" : "No"}, width: 100},
		{field: "stock", title: "Stock", width: 100},
		//{field: "allow_back_order", title: "Back Order", template: function(dataItem) {return (dataItem.allow_back_order) ? "Yes" : "No"}, width: 100},
		{field: "package", title: "Package", template: function(dataItem) {return (dataItem.package) ? "Yes" : "No"}, width: 100},
		{field: "package_quantity", title: "Pkg Qty", template: function(dataItem) {return (dataItem.package_quantity) ? "Yes" : "No"}, width: 100},
		{field: "quantity_ordered", title: "Ordered", width: 100},
		{field: "quantity_shipped", title: "Shipped", width: 100}
	]

	$(function() {
		$("#grid").kendoGrid({
			dataSource: getGridDataSourceConfig(obj),
			columns: gridColumnsConfig,
			sortable: {allowUnsort: false},
			scrollable: true,
			pageable: gridPageableConfig,
			resizable: true,
			dataBound: function(e) {gridOnDataBound(this)}
		})
	});
//-->
</script>

<cfoutput>

	<div class="row" style="margin-bottom: 10px;">
		<div class="col-lg-12">
			<a href="#script_name#?ui=product&Product_ID=0" class="btn btn-info">New&nbsp;product</a>
			<a id="filterLink" href="##" class="btn btn-info" onclick="toggleFilter('filters')">Show filters</a>
			<div class="btn-group">
				<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">Actions</button>
				<button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
				<ul class="dropdown-menu">
					<li><a href="?action=export&collection=#ui#" target="_new">Export</a></li>
				</ul>
			</div>
			<span class="pull-right"><span id="countLabel" class="badge"></span><!--- <cfif StructKeyExists(filter, "filter")>&nbsp;<span class="label label-warning">Filtered</span></cfif> ---></span>
		</div>
	</div>
	
	<form name="filterForm" id="filterForm" action="#script_name#" method="post">
		<input type="hidden" name="ui" value="#ui#">
		<input type="hidden" name="defaultFilter" value="#request.Base.cfmlToWDDX(defaultFilter)#" />
		<div id="filters" class="well well-small" style="display: none;">
			<table cellpadding="6">
				<tr valign="top">
					<td>
						<label for="Active">Active</label>
						<select id="Active" name="Active" class="form-control" size="1" style="width: 100px;">
							<option value=""<cfif filter.Active eq ""> selected</cfif>>All</option>
							<option value="1"<cfif filter.Active eq 1> selected</cfif>>Yes</option>
							<option value="0"<cfif filter.Active eq 0> selected</cfif>>No</option>
						</select>
					</td>
					<td>
						<label for="productCategoryIDs">Categories</label>
						<select id="productCategoryIDs" name="productCategoryIDs" class="form-control" size="7" multiple="true">
							<option value=""<cfif filter.productCategoryIDs eq ""> selected</cfif>>All</option>
							<cfloop query="productCategories">
								<option value="#Product_Category_ID#"<cfif ListFind(filter.productCategoryIDs, Product_Category_ID) gt 0> selected</cfif>>#Category#<cfif Len(Subcategory)> - #Subcategory#</cfif></option>
							</cfloop>
						</select>
					</td>
					
				</tr>
				<tr>
					<td colspan="5">
						<button type="submit" name="action" value="filter" class="btn btn-info">Apply</button> <button type="submit" name="action" value="resetFilter" class="btn btn-info">Clear</button>
					</td>
				</tr>
			</table>
		</div>
	</form>
	
	<div id="loading">
		<div class="progress progress-striped active" style="margin-left: 25%; margin-right: 25%; margin-top: 40px;">
			<div class="progress-bar progress-bar-info"  role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
			</div>
		</div>
	</div>
	<div id="grid" style="display: none;"></div>
	<div id="noRecs" class="alert alert-info" style="display: none;">No products</div>

</cfoutput>